<template>
    <div class="page-container">
        <div class="page-row">
            <!-- <el-input style="width: 180px; height: 26px; margin-right: 28px;" v-model="queryParam.skuName" placeholder="请输入商品名称" :suffix-icon="Search" @keydown.enter.prevent="bindSearch"></el-input> -->
            <el-button type="primary" size="small" @click="addService">添加客服</el-button>
        </div>
        <el-table :data="list" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="avatar" label="头像">
                <template #default="scope">
                    <el-avatar :src="scope.row.avatar" />
                </template>
            </el-table-column>
            <el-table-column prop="nickname" label="客服名称" />
            <el-table-column prop="gender" label="性别" >
                <template #default="scope">
                    {{ scope.row.gender == 1 ? '男' : (scope.row.gender == 2 ? '女' : '未知') }}
                </template>
            </el-table-column>
            <el-table-column prop="mobile" label="手机号" />
            <el-table-column prop="email" label="用户邮箱" />
            <el-table-column prop="motto" label="座右铭" />
            <el-table-column prop="createdAt" label="成为客服时间" width="180"/>
            <el-table-column fixed="right" width="200px" label="操作">
                <template #default="scope">
                    <!-- <el-button size="small" link type="primary" @click="showUpdate(scope.row)" >编辑</el-button> -->
                    <el-button size="small" link type="primary" @click="remove(scope.row)" >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="page-block">
            <el-pagination v-model:currentPage="queryParam.current" v-model:page-size="queryParam.size"
                :page-sizes="[10, 20, 30, 40]" :small="true" :disabled="false" :background="false"
                layout="total, sizes, prev, pager, next, jumper" :total="total" :hide-on-single-page="false"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>

        <!-- 添加弹框 -->
        <el-dialog v-model="showAddModal" title="添加客服" center>
            <el-table height="60vh" :data="addChatServices" style="width: 100%" @selection-change="addSelect">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="avatar" label="用户头像">
                    <template #default="scope">
                        <el-avatar :src="scope.row.avatar" />
                    </template>
                </el-table-column>
                <el-table-column prop="nickname" label="昵称" width="180" />
                <el-table-column prop="phone" label="手机号" width="180" />
            </el-table>
            <div class="page-block">
                <el-pagination v-model:currentPage="addSearch.current" v-model:page-size="addSearch.size"
                    :page-sizes="[10, 20, 30, 40]" :small="true" :disabled="false" :background="false"
                    layout="total, sizes, prev, pager, next, jumper" :total="addSearch.total" :hide-on-single-page="false"
                    @size-change="handleSizeChangeAdd" @current-change="handleCurrentChangeAdd" />
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button :disabled="addSkuInfo.length == 0" @click="submitAdd" type="primary">保 存</el-button>
                    <el-button @click="showAddModal = false">取 消</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { reactive, toRefs, nextTick, onMounted, ref } from 'vue'
import { Plus, Search, SetUp } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox, ElTable } from 'element-plus'
import { chatApi } from '/@/api/sys/chat/index'
import { useRoute } from 'vue-router'

export default {
    name: "chatService",
    setup(props) {
        const api = chatApi()
        const route = useRoute()
        const state = reactive({
            list: [], // 列表数据
            total: 0, // 总数
            addChatServices: [], // 可成为客服的人员
            delService: [], // 删除客服人员
            showAddModal: false, // 显示添加弹框控制
            addSkuInfo: [], // 选中的人员
            queryParam: {
                current: 1, // 当前页
                size: 10,   // 页大小
            },
            addSearch: {
                current: 1, // 当前页
                size: 10,   // 页大小
            }
        })
        onMounted(() => {
            getList()
        })
        // 获取数据
        const getList = () => {
            api.getList(state.queryParam).then(res => {
                state.list = res.data.records
                state.total = res.data.total
            })
        }        
        // 显示添加客服弹窗
        const addService = () => {
            state.addChatServices = []
            state.showAddModal = true
            getAddList()
        }
        // 获取未添加商品数据
        const getAddList = () => {
            api.getNotChat(state.addSearch).then(res => {
                state.addChatServices = res.data.records
                state.addSearch.total = res.data.total
            })
        }
        // 多选人员
        const handleSelectionChange = (val) => {
            console.log(val);
            state.editParam.skuIds = []
            for (let index = 0; index < val.length; index++) {
                state.editParam.skuIds.push(val[index].id)
            }
        }
        // 选择人员成为客服
        const addSelect = (val) => {
            console.log(val);
            state.addSkuInfo = val
        }
        // 点击添加客服按钮
        const submitAdd = () => {
            var users = []
            state.addSkuInfo.forEach(item => {
                let map = {
                    id: item.id,
                    mobile: item.phone,
                    nickname: item.nickname,
                    avatar: item.avatar == null ? "":item.avatar,
                    gender: item.gender,
                    password: item.password,
                    email: item.email == null ? "":item.email
                }
                users.push(map)
            })
            api.createChat({users: users}).then(res => {
                getList()
                getAddList()
                state.addSkuInfo = []
                ElMessage.success('添加成功')
            })
        }
        const remove = (val) => {
            api.removeBath({
                users: [val.id]
            }).then(res => {
                getList()
                ElMessage.success('删除成功')
            })
        }
        // 条数修改
        const handleSizeChange = e => {
            state.queryParam.size = e
            getList()
        }
        // 页码修改
        const handleCurrentChange = e => {
            state.queryParam.current = e
            getList()
        }
        // 条数修改
        const handleSizeChangeAdd = e => {
            state.addSearch.size = e
            getAddList()
          }
        // 页码修改
        const handleCurrentChangeAdd = e => {
            state.addSearch.current = e
            getAddList()
        }
        return {
            ...toRefs(state),
            Plus,
            Search,
            getList,
            addService,
            addSelect,
            submitAdd,
            remove,
            handleSelectionChange,
            handleSizeChange,
            handleCurrentChange,
            handleSizeChangeAdd,
            handleCurrentChangeAdd,
        }
    },
}
</script>

<style lang="scss">
.page-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}
</style>